<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<script src="/jquery.js" type="text/javascript"></script>
		<title>iChm File Management</title>
		<style>
		  * {padding:0;margin:0;}
			body {margin:0;font: normal 12px Arial, Verdana, Tahoma; color:#333;background: #F0F0F0 url("bg.png") 50% 0 fixed repeat;}
			#main {width:800px;margin:0 auto;}
			#header {background: transparent url(titlebg.png) repeat-x;border-top: 1px solid #dcdcdc;border-bottom: 1px solid #404040;height:50px;}
			form.upload {margin-left:12px;padding-left:48px;padding-top:8px;margin-top:10px;height:32px;}
			table {width:100%;padding:0;border-bottom: 1px solid #fff;}
			thead {margin:0;padding:0;}
			th {height:15px;text-align: left;padding-left:20px;border-left:1px solid #999;border-bottom:1px solid #999;color:#303;font-size:.9em;font-weight: normal;background: transparent url(theadbg.png) repeat-x;}
			td.del, th.del {width:8em;}
			tbody td {padding-left:20px;background-color:#fff;height:20px;border-bottom: 1px solid #ccc;}
			tr.shadow td{background-color:#ecf3fe;}
			a.file {text-decoration:none;color:#333;}
			#footer {height:50px;border-top:1px solid #ccc;margin:0 auto;position:absolute;bottom:0px;width:800px;text-align: center;}
			#footer .content {border-top: 1px solid #fff;}
		</style>
	</head>

	<body>
		<div id='main'>
		<div id='header'>
		<form action="/files" enctype="multipart/form-data" method="post" class='upload'>
			<label>选择文件:</label>
			<input id="newfile" name="newfile" size="40" type="file" />
			<input name="commit" type="submit" value="Upload" class='button' />
		</form>
		</div>
		<table border="0" cellspacing="0" cellpadding="0">
			<thead>
			 <tr><th>文件名</th><th class='del'>删除</th></tr>
			</thead>
			<tbody id="filelist">
			</tbody>
		</table>
		<script type="text/javascript" charset="utf-8">
		var now = new Date();
		$.getJSON("/files?"+ now.toString(),
		function(data){
		  var shadow = false;
		  $.each(data, function(i,item){
		    var trclass='';
		    if (shadow){
		      trclass= " class='shadow'";
			}
			encodeName = encodeURI(item.name).replace("'", "&apos;");
		    $("<tr" + trclass + "><td><a href='/files/" + encodeName + "' class='file'>" + item.name + "</a></td>" + "<td class='del'><form action='/files/" + encodeName + "' method='post'><input name='_method' value='delete' type='hidden'/><input name=\"commit\" type=\"submit\" value=\"删除\" class='button' /></td>" + "</tr>").appendTo("#filelist");
		    shadow = !shadow;
		  });
		});
		</script>
		</div>	   
	</body>

</html>